<style lang="stylus" scoped>
.custom-link {
  padding: 20px 0;
}

.input-item {
  margin-bottom: 20px;

  .label {
    height: 14px;
    margin-bottom: 6px;
    line-height: 14px;
    font-size: 12px;
    color: #6f6f85;
  }
}

.undercoat {
  display: inline-block;
  width: 50px;
  height: 26px;
  border: 4px solid #1a1d23;
  border-radius: 4px;
  text-align: center;

  &:before {
    content: '底色';
    display: block;
    width: 24px;
    height: 100%;
    writing-mode: vertical-lr;
    background: #1a1d23;
    line-height: 20px;
    font-size: 12px;
    color: #565d6c;
  }
}

.size-selector {
  margin-left: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  text-align: right;
}

.optionOpen{
  height: 300px; 
  overflow: hidden;
}

.option{
  padding: 2px;
  color: #fff;
}

.optionInput{
  height: 30px;
  width : 100%;
}

</style>

<template>
  <div class="custom-link">
    <div class="input-item">
      <div class="label"> 城市 </div>
      <div>
        <label>
          <input class="optionInput" type="text" v-model="cityName" placeholder="请输入城市名称" @input="filterOptions" />
          <div class="optionOpen" v-show="isOptionOpen">
            <span class="option" v-for="option in filteredOptions" :key="option.value" @click="onChange(option.value)">
              {{ option.label }}
            </span>
          </div>
        </label>
      </div>
    </div>
    <div class="footer">
      <v-button @click="openDetail"> 查看详情</v-button>
      <v-button @click="confirm">确定</v-button>
    </div>
  </div>
</template>

<script lang="ts">
import { City } from '@database/entity/weather';
import { getCity } from '@/database/utils/init-city-to-db';
import { ref } from 'vue';
export default {
  components: { },
  emits: ['confirm', 'detail'],
  props: {
    cityData: {
      type: City,
      default() {
        return null;
      },
    },
  },
  setup(props, context) {
    const paramsSeprator = '-|-';
    const cityName = ref(props.cityData.cityName);
    const cityCode = ref(props.cityData.cityCode);
    const cityArr = ref();
    getCity().then((data) => {
      let arr = [];
      for (const key in data) {
        arr.push({ label: key, value: data[key] });
      }
      cityArr.value = arr;
    });
    const filteredOptions = ref(cityArr.value);
    const isOptionOpen = ref(true);
    function selectChange(newValue: string) {
      cityCode.value = newValue;
      for (const key in cityArr.value) {
        if (cityArr.value[key].value == newValue) {
          cityName.value = cityArr.value[key].label;
        }
      }
    };
    function filterOptions() {
      isOptionOpen.value = true;
      if (cityName.value === '') {
        filteredOptions.value = cityArr.value;
      } else {
        filteredOptions.value = cityArr.value.filter((option) =>
          option.label.toLowerCase().includes(cityName.value.toLowerCase())
        );
      }
    };
    function onChange(value: string) {
      cityCode.value = value;
      isOptionOpen.value = false;
      for (const key in filteredOptions.value) {
        if (filteredOptions.value[key].value == cityCode.value) {
          cityName.value = filteredOptions.value[key].label;
        }
      }
    }

    return {
      cityArr,
      cityName,
      cityCode,
      filteredOptions,
      selectChange,
      isOptionOpen,
      filterOptions,
      onChange,

      openDetail() {
        window.open(
          'https://www.qweather.com/weather/' + cityCode.value + '.html'
        );
        context.emit('detail', {});
      },
      confirm() {
        context.emit('confirm', {
          undercoat: cityCode,
          value: `weather:${cityCode.value}${paramsSeprator}${cityName.value}`,
        });
      },
    };
  },
};
</script>